<template>
<div>
  <div class="banner" @click="handleBannerClick">
    <img :src="bannerImg" />
    <h2>{{this.title}}</h2>
    <p><span class="iconfont">&#xe616;</span>{{bannerList.length}}</p>
  </div>
  <banner-fade>
    <banner-swiper :list="bannerList" v-show="showSwiper" @changeShow="colseSwiper"></banner-swiper>
  </banner-fade>
</div>
</template>

<script>
import bannerSwiper from '@/pages/common/swiper'
import bannerFade from '@/pages/common/fade'
export default {
  data () {
    return {
      showSwiper: false
    }
  },
  components: {
    bannerSwiper,
    bannerFade
  },
  props: {
    title: String,
    bannerImg: String,
    bannerList: Array
  },
  methods: {
    handleBannerClick () {
      this.showSwiper = true
    },
    colseSwiper () {
      this.showSwiper = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
  width:100%
  height:0
  padding-bottom:55%
  overflow:hidden
  position:relative
  color:#fff
  img
    width:100%
    float:left
  h2
    position:absolute
    width:100%
    height:.6rem
    line-height:.6rem
    padding-bottom:.2rem
    text-indent:.2rem
    bottom:0
    left:0
    font-size:.36rem
    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.8))
  p
    position:absolute
    line-height:.4rem
    bottom:.8rem
    left:.2rem
    padding:0 .3rem
    border-radius:.2rem
    background:rgba(0,0,0,0.5)
    font-size:.24rem
    .iconfont
      font-size:.24rem
      padding-right:.1rem
</style>
